<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form>
          <el-form-item>
            学科名称：<el-input
              v-model="params.subjectName"
              placeholder=""
              class="inp"
            ></el-input>
            <el-button @click="remove">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              class="add"
              @click="addsub"
              >新增学科</el-button
            >
            <el-alert
              class="info"
              :title="`数据一共 ${this.counts} 条`"
              type="info"
              show-icon
              :closable="false"
            ></el-alert>
            <!-- 表格 -->
            <el-table :data="list" style="width: 100%">
              <el-table-column label="序号" type="index">
                <template> </template>
              </el-table-column>
              <el-table-column label="学科名称" prop="subjectName">
              </el-table-column>
              <el-table-column label="创建者" prop="username">
              </el-table-column>
              <el-table-column width="180px" label="创建日期" prop="addDate">
                <template #default="{row}">
                  {{ formatTime(row.addDate) }}
                </template>
              </el-table-column>
              <el-table-column label="前台是否显示" prop="isFrontDisplay">
                <template #default="{row}">
                  {{ formatIsFront(row.isFrontDisplay) }}
                </template>
              </el-table-column>
              <el-table-column label="二级目录" prop="twoLevelDirectory">
                <template> </template>
              </el-table-column>
              <el-table-column label="标签" prop="tags">
                <template> </template>
              </el-table-column>
              <el-table-column label="题目数量" prop="totals">
                <template> </template>
              </el-table-column>
              <el-table-column width="250px" label="操作">
                <template #default="{row}">
                  <el-link
                    class="link"
                    type="primary"
                    :underline="false"
                    @click="jumpdir(row.id, row.subjectName)"
                    >学科分类</el-link
                  >
                  <el-link
                    class="link"
                    type="primary"
                    :underline="false"
                    @click="jumptags(row.id, row.subjectName)"
                    >学科标签</el-link
                  >
                  <el-button type="text" @click="edit(row)">修改</el-button>
                  <el-button type="text" @click="del(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- current-page: 当前页数
                 background：给分页按钮添加背景色
                 page-size: 每页显示条目个数
                 total： 总条目数
                 page-sizes：每页显示个数选择器的选项设置
                 size-change：pagesize改变时会触发
                 current-change：currentpage改变时会触发
             -->
            <!-- @size-change="handleSizeChange"
              @current-change="handleCurrentChange" 
              :current-page.sync="currentPage2"
              -->
            <el-pagination
              class="page"
              background
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :page-sizes="[5, 10, 15, 20, 30]"
              :current-page.sync="params.page"
              :page-size="params.pagesize"
              layout="prev, pager, next, sizes, jumper"
              :total="counts"
            >
            </el-pagination>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!-- 新增学科弹窗 -->
    <addsubjects
      ref="list"
      :showaddDialog="showaddDialog"
      @close-Dialog="addClose"
      @update-list="fetchList"
    ></addsubjects>
    <!-- <el-dialog 
      class="assign-role" 
      title="新增学科" 
      :visible="showaddDialog"
      @close="addClose"
      >
      <template #default>
        <el-form :model="listForm" :rules="listrules" ref="list" label-width="100px" class="demo-ruleForm">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="listForm.subjectName" placeholder="请输入学科名称"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch 
            v-model="listForm.isFrontDisplay" 
            active-color="#13ce66"
            inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button size="small" @click="addClose">取消</el-button>
        <el-button type="primary" size="small" @click="confirm">确认</el-button>
      </template>
    </el-dialog> -->
  </div>
</template>

<script>
import { list, detail, remove } from "@/api/hmmm/subjects.js";
import addsubjects from "@/module-hmmm/components/subjects-add.vue";
import dayjs from "dayjs";
export default {
  components: {
    addsubjects
  },
  data() {
    return {
      // input: '',
      list: [],
      counts: 0,
      params: {
        page: 1,
        pagesize: 10,
        subjectName: ""
      },
      searchList: [],
      showaddDialog: false
      // listForm: {
      //   subjectName: '',
      //   isFrontDisplay: true,
      // },
      // listrules: {
      //   subjectName:[
      //     { required: true, message: '请输入学科名称', trigger: 'blur'}
      //   ]
      // }
    };
  },
  mounted() {
    this.fetchList();
    // this.simpleList()
  },
  methods: {
    // 获取页面列表
    async fetchList() {
      const res = await list(this.params);
      this.list = res.data.items;
      this.counts = res.data.counts;
    },

    // 时间格式转换
    formatTime(value) {
      return dayjs(value).format("YYYY-MM-DD hh:mm:ss");
    },
    // 格式化 枚举
    formatIsFront(value) {
      const TYPE = {
        0: "否",
        1: "是"
      };
      return TYPE[value];
    },
    handleCurrentChange(page) {
      // console.log(page)
      this.params.page = page;
      this.fetchList();
    },
    handleSizeChange(size) {
      // console.log(size)
      this.params.pagesize = size;
      this.params.page = 1;
      this.fetchList();
    },
    // 跳转到目录
    jumpdir(id, name) {
      this.$router.push({
        path: "directorys",
        query: {
          id,
          name
        }
      });
    },
    // 跳转到标签页
    jumptags(id, name) {
      this.$router.push({
        path: "tags",
        query: {
          id,
          name
        }
      });
    },
    // 修改按钮
    async edit(data) {
      // 打开弹窗
      this.showaddDialog = true;
      // 调用子组件
      this.$refs.list.fetchDg(data);
      // 调用接口 数据回填
      // const {data: res} = await detail(data)
      // this.listForm = res
      // this.listForm.isFrontDisplay = Boolean(res.isFrontDisplay)
    },
    // 关闭弹框
    addClose() {
      this.showaddDialog = false;
      // this.listForm = {
      //   subjectName: '',
      //   isFrontDisplay: true
      // }
      // this.$refs.list.resetFields()
    },
    // 新增学科按钮
    addsub() {
      this.showaddDialog = true;
    },
    // 表单确定按钮
    // confirm() {
    // this.$refs.list.validate(async(valid) => {
    //   if(valid) {
    //     // 在点击确定的时候 区分当前是修改还是新增 再调接口
    //     if(this.listForm.id) {
    //       // 调用更新接口
    //       await update(this.listForm)
    //     } else {
    //       // 调用添加接口
    //       await add(this.listForm)
    //     }

    //     // 提示用户
    //     this.$message.success(this.listForm.id ? '修改成功' : '添加成功')
    //     // 关闭弹窗
    //     this.addClose()
    //     // 刷新页面
    //     this.fetchList()
    //     // console.log(this.listForm)
    //   }
    // })
    // },
    // 删除功能
    del(data) {
      this.$confirm("此操作将永久删除该学科，是否继续?", "提示")
        .then(async () => {
          // 删除接口
          await remove(data);
          // 删除成功后续 提示用户
          this.$message.success("删除操作成功");
          // // 刷新列表
          // this.fetchList()
          // 如果当前页没有数据显示 需要让页码-1
          if (this.list.length === 1 && this.params.page > 1) {
            this.params.page--;
          }
          this.params.page = 1;
          this.fetchList();
          // 关闭弹窗
          this.showaddDialog = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 清除输入框内容
    remove() {
      this.params.subjectName = "";
    },
    // 获取需要渲染到页面中的数据
    // setSlist(arr) {
    //   this.list = arr
    // },
    // 搜索列表
    search() {
      this.params.page = 1;
      this.fetchList();
    }
  }
};
</script>

<style lang="scss" scoped>
.inp {
  width: 200px;
  margin-right: 10px;
}
.add {
  float: right;
}
.info {
  margin-top: 20px;
  margin-bottom: 20px;
}
.page {
  margin-top: 20px;
  margin-left: 700px;
}
.link {
  margin-right: 10px;
}
</style>
